<template>
	<view class="pages">
		<!-- 头部 -->
		<view class="header-bg"></view>
		<view class="header_bar header_fixed"  :class="heightTop > 50 ? 'header_main' : ''">
			<view class="header">
				<view class="header-goWhiteBack" @click="$tools.back(1)"></view>
				<view class="header-title--white">追踪物流</view>
			</view> 
		</view> 
		<!-- 主体 -->
		<view class="seeLog">
			<view class="goodsBox">
				<view class="goodsBox-item" v-if="type=='gift'">
					<image :src="orderDetail.gift.image" mode=""></image>
					<view class="news">
						<!-- <view class="status" >商品运输中</view> -->
						<view class="name">{{orderDetail.gift.storeName}}</view>
						<view class="tips">￥{{ orderDetail.gift.price }}</view>
					</view>
				</view>
				<view v-if="type=='order'">
				<view class="goodsBox-item" 
				v-for="(item,index) in orderDetail.cartInfoList" :key="index">
					<image :src="item.cartInfoMap.productInfo.image" mode=""></image>
					<view class="news">
						<!-- <view class="status" >商品运输中</view> -->
						<view class="name">{{item.cartInfoMap.productInfo.storeName}}</view>
						<view class="tips">￥{{ item.cartInfoMap.productInfo.attrInfo.price }}</view>
					</view>
				</view>
			</view>
				<view class="codeNo">
					<text>[{{ orderDetail.deliveryName }}]：{{ orderDetail.deliveryId }}</text>
					<text class="copy" @tap.stop="$tools.copy(orderDetail.deliveryId)">复制</text>
				</view>
			</view>
			
			<view class="seeLog-wrapper">
				<view class="seeLog-address">
					<image src="@/static/shop/seeLog-receive.png" mode="widthFix"></image>
					<view class="logBox">
						<view class="title">[收货地址]：{{ orderDetail.userAddress }}</view>
					</view>
				</view>
				
				<!-- 物流信息 -->
				<view class="seeLog-address"  v-if="logisticDetail.length">
					<!-- v-if="logisticDetail.length > 0" -->
					<view class="logBox-item">
						<!-- <view class="timesBox">
							<view class="timesBox-item" v-for="(item,index) in 9" :key="index">
								<view class="time">11-22</view>
								<view class="info">01:35</view>
							</view>
						</view> -->
						
						<view class="log">
							<u-steps current="0" direction="column" 
							activeIcon="../../static/shop/seeLog.png" 
							inactiveIcon="../../static/shop/seeLog--no.png"
							activeColor="#FD4728" inactiveColor="#FD4728 ">
									<!-- <u-steps-item title="[北京市] [北京综合邮件处理中心]，已" desc="2020-11-12 15:48" iconSize="8"></u-steps-item>
									<u-steps-item title="[沈阳市] 订单已到达辽宁沈阳转运中心" desc="2020-11-12 15:48" iconSize="8"></u-steps-item>
									<u-steps-item title="[沈阳市] 订单已到达辽宁沈阳转运中心" desc="2020-11-12 15:48" iconSize="8"></u-steps-item>
									<u-steps-item title="[沈阳市] 快件已从辽宁沈阳直课部发出，正在发往辽宁沈阳转运中心" desc="2020-11-12 15:48" iconSize="8"></u-steps-item>
									<u-steps-item title="[沈阳市] 您的包裹已由物流公司揽收" desc="2020-11-12 15:48" iconSize="8"></u-steps-item>
									<u-steps-item title="[沈阳市] 您的包裹已由物流公司揽收" desc="2020-11-12 15:48" iconSize="8"></u-steps-item>
									<u-steps-item title="[沈阳市] 您的包裹已由物流公司揽收" desc="2020-11-12 15:48" iconSize="8"></u-steps-item>
									<u-steps-item title="[沈阳市] 您的包裹已由物流公司揽收" desc="2020-11-12 15:48" iconSize="8"></u-steps-item>
									<u-steps-item title="包裹正在等待揽收" iconSize="8"></u-steps-item> -->
									
									<u-steps-item v-for="(item,index) in logisticDetail" :key="index"
									:title="item.AcceptStation" 
									:desc="item.AcceptTime" 
									:iconSize="logisticDetail.lenght"></u-steps-item>
								</u-steps>
						</view>
						</view>
					<!-- <view class="initNoData" v-if="logisticDetail.length == 0">啊哦，暂无轨迹信息</view> -->
					
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				heightTop: 0,
				order_no: '',
				logisticDetail: [],
				orderDetail: {},
				goodsDetail: [],
				order_id:'', //订单Id
				type:'', // 哪个订单的
				// webUrl: this.$url.imgUrl,
			}
		},
		computed:{
			getStatus(){
				return function(type){
					switch (type){
						case -1:
							return '退款中';
							break;
						case -2:
							return '已退款';
							break;
						case 0:
							return '待付款';
							break;
						case 1:
							return '待发货';
							break;
						case 2:
							return '待收货';
							break;
						case 4:
							return '已完成';
							break;
						case 5:
							return '已取消';
							break;
						
					}
				}
			},
		},
		onLoad(options) {
			this.order_no = options.value1;
			this.order_id =  options.value2;
			this.type =  options.value3;
		},
		onShow() {
			this.init();
		},
		onPageScroll(e) {
			// e.scrollTop 获取页面的滚动高度
			this.heightTop = e.scrollTop;
		},
		methods: {
			init(){
				this.getOrderDetail();
			},
			// 订单详情
			getOrderDetail(){
				uni.showLoading({});
				var data = {
					"id": this.order_id,
				};
				let method = '/api/order/orderDetail/'+ this.order_id
				if(this.type =='gift'){
					method = '/api/gift/giftOrderDetail/'+ this.order_id
				}
				this.$Ajax(method,data, res => {
						this.orderDetail = this.type =='gift'?res.data:res.data.data;
						this.getLogisticsDetails()
						uni.hideLoading();
					}, err => {
						uni.hideLoading();
					}
				);
			},
			// 查看物流信息
			getLogisticsDetails(){
				var data = {
					"id": this.order_no,
					// "logisticsCompany": this.logisticsCompany,
					// "logisticsOrder": this.logisticsOrder,
				};
				// data['logisticsCompany'] = this.logisticsCompany;
				// data['logisticsOrder'] = this.logisticsOrder;
				// data['logisticsCompany'] = '申通快递';
				// data['logisticsOrder'] = '773229024562886';
				console.log("data：",data);
				this.$Ajax('/api/order/getLogisticsDetails/'+this.order_no,data, res => {
					if(this.orderDetail.storeId==2){
						const logisticDetail = res.data?res.data.result.list :[]
						this.logisticDetail = []
						logisticDetail.forEach((item,index) => {
							const obj={
								Action:(index+1),
								AcceptStation:item.status,
								AcceptTime:item.time,
							}
							this.logisticDetail.push(obj)
						});
						console.log('logisticDetail',this.logisticDetail.sort(this.dateData("AcceptTime", false)))
					}else{
						this.logisticDetail = res.data?JSON.parse(res.data.traces) : [];
						// console.log('logisticDetail',this.logisticDetail)
						console.log('logisticDetail',this.logisticDetail.sort(this.dateData("AcceptTime", false)))
					}
					// 	let data = {
					// 		"EBusinessID": "1803115",
					// 		"ShipperCode": "YD",
					// 		"LogisticCode": "433148478453083",
					// 		"State": "3",
					// 		"StateEx": "302",
					// 		"Location": "深圳市",
					// 		"traces": [{
					// 				"Action": "1",
					// 				"acceptStation": "【驻马店市】河南西平县公司-黄娅琼（18616905459） 已揽收",
					// 				"acceptTime": "2023-04-01 17:37:14",
					// 				"Location": "驻马店市"
					// 		}, {
					// 				"Action": "204",
					// 				"AcceptStation": "【漯河市】已到达 河南漯河分拨交付中心",
					// 				"AcceptTime": "2023-04-01 20:06:01",
					// 				"Location": "漯河市"
					// 		}, {
					// 				"Action": "2",
					// 				"AcceptStation": "【漯河市】已离开 河南漯河分拨交付中心；发往 深中地区包",
					// 				"AcceptTime": "2023-04-01 20:24:41",
					// 				"Location": "漯河市"
					// 		}, {
					// 				"Action": "205",
					// 				"AcceptStation": "【深圳市】已到达 广东深圳公司",
					// 				"AcceptTime": "2023-04-03 00:22:14",
					// 				"Location": "深圳市"
					// 		}, {
					// 				"Action": "2",
					// 				"AcceptStation": "【深圳市】已离开 广东深圳公司；发往 广东深圳公司龙岗区东环分拨分部",
					// 				"AcceptTime": "2023-04-03 00:41:26",
					// 				"Location": "深圳市"
					// 		}, {
					// 				"Action": "2",
					// 				"AcceptStation": "【深圳市】已离开 广东深圳公司；发往 广东深圳公司龙岗区东环分拨分部",
					// 				"AcceptTime": "2023-04-03 01:13:53",
					// 				"Location": "深圳市"
					// 		}, {
					// 				"Action": "205",
					// 				"AcceptStation": "【深圳市】已到达 广东深圳公司龙岗区东环分拨分部[0755-61887257]",
					// 				"AcceptTime": "2023-04-03 02:07:23",
					// 				"Location": "深圳市"
					// 		}, {
					// 				"Action": "2",
					// 				"AcceptStation": "【深圳市】已离开 广东深圳公司龙岗区东环分拨分部[0755-61887257]；发往 广东深圳公司龙华区西头分部",
					// 				"AcceptTime": "2023-04-03 02:07:53",
					// 				"Location": "深圳市"
					// 		}, {
					// 				"Action": "202",
					// 				"AcceptStation": "【深圳市】广东深圳公司龙华区西头分部[0755-61887257] 快递员 邹培荣（15217767561） 正在为您派送【95121为韵达快递员外呼专属号码，请放心接听】",
					// 				"AcceptTime": "2023-04-03 02:08:23",
					// 				"Location": "深圳市"
					// 		}, {
					// 				"Action": "205",
					// 				"AcceptStation": "【深圳市】已到达 广东深圳公司龙岗区东环分拨分部[0755-61887257]",
					// 				"AcceptTime": "2023-04-03 04:24:49",
					// 				"Location": "深圳市"
					// 		}, {
					// 				"Action": "2",
					// 				"AcceptStation": "【深圳市】已离开 广东深圳公司龙岗区东环分拨分部[0755-61887257]；发往 广东深圳公司龙华区西头分部",
					// 				"AcceptTime": "2023-04-03 04:25:19",
					// 				"Location": "深圳市"
					// 		}, {
					// 				"Action": "202",
					// 				"AcceptStation": "【深圳市】广东深圳公司龙华区西头分部[0755-61887257] 快递员 邹培荣（15217767561） 正在为您派送【95121为韵达快递员外呼专属号码，请放心接听】",
					// 				"AcceptTime": "2023-04-03 04:25:49",
					// 				"Location": "深圳市"
					// 		}, {
					// 				"Action": "412",
					// 				"AcceptStation": "【代收点】您的快件已暂存至 下油松B区10栋丰巢，地址：广东省深圳市龙华区下油松B区丰巢，请及时领取签收，如有疑问请电联快递员:邹培荣(15217767561) ，投诉电话:020-23393006",
					// 				"AcceptTime": "2023-04-03 12:36:02",
					// 				"Location": "深圳市"
					// 		}, {
					// 				"Action": "302",
					// 				"AcceptStation": "【代收点】您的快件已签收，签收人在 下油松B区10栋丰巢(广东省深圳市龙华区下油松B区丰巢)领取，投诉电话:020-23393006",
					// 				"AcceptTime": "2023-04-07 21:33:10",
					// 				"Location": "深圳市"
					// 		}],
					// 		"DeliveryMan": "邹培荣",
					// 		"DeliveryManTel": "15217767561",
					// 		"Success": true
					// }
					//	this.logisticDetail = data.Traces;
					
					}, err => {
					}
				);
			},
			// property是你需要排序传入的key,bol为true时是升序，false为降序
			dateData(property, bol) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					if (bol) {
						// 升序
						return Date.parse(value1) - Date.parse(value2);
					} else {
						// 降序
						return Date.parse(value2) - Date.parse(value1)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.header-bg{
	height: 260rpx;
	background: linear-gradient( #FD4728,#FF7E20);
}
.header_main{
	background: linear-gradient( #FD4728,#FF7E20);
}
	.seeLog{
		.goodsBox{
			margin: auto;
			margin-top: -100px;
			background: #fff;
			width: 93.6%;
			border-radius: 20rpx;
			@include flexLeftColumn;
			padding: 36rpx 20rpx;
			border-bottom: 10rpx solid #F5F5F5;
			&-item{
				@include flexLeft;
				image{
					width: 174rpx;
					height: 174rpx;
					margin-right: 22rpx;
				}
				.news{
					width: calc(100% - 194rpx);
					.status{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #FD4728;
					}
					.name{
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.90);
						@include initMoreLine(2);
						margin: 38rpx 0 0;
					}
					.tips{
						font-size: 24rpx;
						color: rgba(51,51,51,0.6);
						margin-top: 10rpx;
					}
				}
			}
			.codeNo{
				@include flexBetween;
				background: #F5F5F5;
				border-radius: 4rpx;
				padding: 20rpx 30rpx;
				margin-top: 24rpx;
				width: 100%;
				text{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #131414;
				}
				.copy{
					font-family: PingFangSC-Regular, PingFangSC-Regular;
					font-weight: 400;
					font-size: 22rpx;
					color: #FD4728;
					border: 1px solid #FD4728;
					padding: 6rpx 10rpx 8rpx;
					border-radius: 20rpx;
				}
			}
		}
		&-wrapper{
			margin: 0 36rpx;
		}
		&-address{
			@include flexLeft;
			padding: 40rpx 0rpx;
			position: relative;
			border-bottom: 1px solid #EBEBEB;
			image{
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
			.title{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #151419;
				margin: 6rpx 0;
				width: 90%;
				word-break: break-all;
			}
		}
	}
	
	.logBox-item{
		@include flexLeft;
		align-items: flex-start;
		.timesBox{
			width: 15%;
			&-item{
				@include flexLeftColumn;
				justify-content: flex-start;
				height: 150rpx;
			}
			.time{
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: rgba(255,255,255,0.6);
				&--active{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
			.info{
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: rgba(255,255,255,0.6);
				&--active{
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		.log{
			flex: 1;
		}
	}
	
	/deep/.u-steps-item__content.u-steps-item__content--column{
		margin-left: 18rpx !important;
		margin-bottom: 10rpx !important;
		height: auto;
		overflow: hidden;
	}
	/deep/.u-steps-item--column{
		align-items: baseline;
	}
	/deep/ .u-steps-item__line{
		top: 30rpx;
		left: 21rpx;
	}
	/deep/ .u-steps-item__wrapper--column{
		width: 44rpx !important;
		height: 44rpx !important;
		background: none !important;
	}
	/deep/ .u-text__value.u-text__value--main{
		margin-bottom: 10rpx;
	}
	/deep/.u-text__value--main{
		color: #FD4728;
	}
	/deep/.u-text__value--main +span{
		color: #FD4728;
	}
	/deep/ .u-text__value--content{
		color: #979797;
		margin-bottom: 10rpx;
	}
	/deep/ .u-steps-item:nth-child(1) .u-text__value--tips{
		color: #FD4728;
	}
	
	/deep/ .u-icon__img{
		width: 44rpx !important;
		height: 44rpx !important;
	}
	
</style>